<template>
  <div style="width:100%; min-height: 1080px; background: white; padding: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1)">
    <el-button @click="backLast">返 回</el-button>
    <el-row type="flex" class="row-bg mt-20px mb-20px" justify="center">
      <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
        <p>姓名 {{queryName}}</p>
      </el-col>
      <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
        <p>身份证：{{idCard}}</p>
      </el-col>
      <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
        <p>查询时间：{{queryTime}}</p>
      </el-col>
    </el-row>
    <div style="width: 100%; height: 570px; position: relative;">
      <iframe
        style="position: relative"
        :src="queryUrl"
        width="100%"
        height="100%"
        frameborder="0"
        title="流水报告"
      ></iframe>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DataQueryLsbgApi, DataQueryLsbg } from '@/api/business/dataquerylsbg'
import {useTagsView} from "@/hooks/web/useTagsView";
const { closeCurrent } = useTagsView()

/** 数据查询-流水报告 列表 */
defineOptions({ name: 'DataQueryLsbgForm' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const route = useRoute() // 路由
const router = useRouter() // 路由

/** 查详情 */
const backLast = async () => {
  closeCurrent(this)
  router.push({
    name: 'DataQueryLsbg'
  })
}

let queryName = ref()
let idCard = ref()
let queryTime = ref()
let queryUrl = ref()

/** 初始化 **/
onMounted(() => {
  //getList()
  // 如果 ID 不存在，显示错误提示并关闭页面
  if (!route.query.queryUrl) {
    message.error('信息不存在，无法查看详情')
    // 关闭当前路由，返回到列表页面
    router.push({ name: 'DataQueryLsbg' })
    return
  }

  queryName.value = route.query.queryName
  idCard.value = route.query.idCard
  queryTime.value = route.query.queryTime
  queryUrl.value = route.query.queryUrl

})
</script>
